<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>渐变作业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .Bigbox {
            margin: 20px auto;
            display: flex;
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .box {
            width: 230px;
            height: 230px;
            border: 1px solid #000;
        }
        /* 从上到下渐变 */
        
        .box:nth-child(1) {
            background-image: linear-gradient(to bottom, red 0%, blue 100%);
        }
        /* 从左到右渐变 */
        
        .box:nth-child(2) {
            background-image: linear-gradient(to right, red 0%, blue 100%);
        }
        /* 从左上到右下渐变 */
        
        .box:nth-child(3) {
            background-image: linear-gradient(to right bottom, red 0%, blue 100%);
        }
        /* 从指定角度渐变 */
        
        .box:nth-child(4) {
            background-image: linear-gradient( 81deg, red 0%, blue 100%);
        }
        /* 从上到下渐变 多个颜色 */
        
        .box:nth-child(5) {
            background-image: linear-gradient( to bottom, red 0%, green 50%, blue 100%);
        }
        /* 从左到右渐变 多个颜色 */
        
        .box:nth-child(6) {
            background-image: linear-gradient( to right, red 0%, yellow 20%, green 50%, blue 75%, purple 100%);
        }
        /* 从左到右渐变 透明 */
        
        .box:nth-child(7) {
            background-image: linear-gradient(to right, rgba(255, 0, 0, 0) 0%, red 100%);
        }
        /* 重复线性渐变 */
        
        .box:nth-child(8) {
            background-image: repeating-linear-gradient(red, yellow 10%, green 20%)
        }
        /* 均匀分布径向渐变 */
        
        .box:nth-child(9) {
            background-image: radial-gradient(red, green, blue);
        }
        /* 不均匀分布径向渐变 */
        
        .box:nth-child(10) {
            background-image: radial-gradient(circle, red, green, blue 50%);
        }
        /* 圆形径向渐变 */
        
        .box:nth-child(11) {
            background-image: radial-gradient(circle, red, yellow, green);
        }
        /* 椭圆径向渐变 */
        
        .box:nth-child(12) {
            background-image: radial-gradient(ellipse, red, yellow, green);
        }
        /* size 参数定义渐变的大小 */
        
        .box:nth-child(13) {
            background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
        }
        
        .box:nth-child(14) {
            background-image: radial-gradient(closest-corner at 60% 55%, blue, green, yellow, black);
        }
        
        .box:nth-child(15) {
            background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
        }
        /* 重复的径向渐变 */
        
        .box:nth-child(16) {
            background-image: repeating-radial-gradient(red, yellow 10%, green 15%)
        }
    </style>
</head>

<body>
    <div class="Bigbox">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

    </div>
</body>

</html>